<template>
  <!-- 根标签 -->
  <div>
    <div id="main-form">
      <el-form :rules="addRules" :model="addItem" ref="addItemRef">
        <h3 style="color: red; margin-left: 40px">项目及发起人信息</h3>
        <hr>
        <h2 style="margin-left: 40px">项目信息</h2>
        <div style="margin-left: 150px">
          <!-- 遍历项目分类 -->
          <b>分类信息 </b>
          <el-checkbox v-for="cg in category" :label="cg.cid" border v-model="addItem.cid">{{cg.cname}}</el-checkbox>
          <br><br>
          <b>项目名称 </b>
          <el-form-item  prop="iname">
            <el-input placeholder="请输入内容" style="width: 800px" v-model="addItem.iname"></el-input>
          </el-form-item>
          <b>简介 </b>
          <el-form-item prop="iintro">
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入内容" style="width: 800px" v-model="addItem.iintro">
            </el-input>
          </el-form-item>
          <b>筹资金额 </b>
          <el-form-item prop="amoney">
            <el-input style="width: 100px" v-model="addItem.amoney"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
            <strong>筹资金额不能低于100元,不能高于10,000,000元</strong>
          </el-form-item>
          <b>筹资天数 </b>
          <el-form-item prop="idays">
            <el-input style="width: 100px" v-model="addItem.idays"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
            <strong>筹资天数为10-99天，建议30天</strong>
          </el-form-item>
          <b>项目头图 </b>
          <el-upload class="upload-demo" action="http://localhost:8888/crowdfunding_system_war_exploded/addCategoryImg"
                     :limit="3" :on-success="IImgSuccess">
            <!-- :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :on-exceed="handleExceed" :file-list="fileList"  -->
            <el-button size="small" type="primary">点击上传</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
            <strong>图片上无文字,支持jpg、jpeg、png、gif格式，大小不超过2M，建议尺寸：740*457px</strong>
          </el-upload>
          <br><br>
          <b>项目详情 </b>
          <el-upload class="upload-demo" action="http://localhost:8888/crowdfunding_system_war_exploded/addCategoryImg"
                     :limit="3" :on-success="showImgSuccess">
            <el-button size="small" type="primary">点击上传</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
            <strong>图片上无文字,支持jpg、jpeg、png、gif格式，大小不超过2M，建议尺寸：740*457px</strong>
          </el-upload>
          <br><br>
        </div>
        <hr>
        <h2 style="margin-left: 40px">发起人信息</h2>
        <div  style="margin-left: 150px">
          <b>自我介绍 </b>
          <el-form-item prop="mshow">
            <el-input placeholder="请输入内容" style="width: 800px" v-model="addItem.mshow"></el-input>
          </el-form-item>
          <b>联系电话 </b>
          <el-form-item prop="mtel">
            <el-input placeholder="请输入内容" style="width: 800px" v-model="addItem.mtel"></el-input>
          </el-form-item>
          <b>客服电话 </b>
          <el-form-item prop="msertel">
            <el-input placeholder="请输入内容" style="width: 800px" v-model="addItem.msertel"></el-input>
          </el-form-item>
          <br><br>
        </div>
        <hr>
        <div id="main-sub">
          <el-button type="primary" @click="nextItem">下一步</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import hub from '../js/EventVue'
export default {
  props:["ta"],
  data(){
    var checkAmoney = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("筹资金额不能为空"))
      }
      var reg = /^[0-9]*$/
      if (!reg.test(value)) {
        return callback(new Error("筹资金额不合法"))
      }
      return callback();
    };
    var checkMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"))
      }
      //判断是否符合手机的正则表达式
      var reg = /^[1][0-9]{10}$/
      if (!reg.test(value)) {
        return callback(new Error("手机号不合法"))
      }
      return callback();
    };
    return{
      //动态获取分类
      category:[],
      addIImgList:[],
      addIShowImgList:[],
      //项目信息收集的信息
      addItem:{
        cid:[],
        iname:'',
        iintro:"",
        amoney:0,
        idays:0,
        mshow:"",
        mtel:"",
        msertel:""
      },
      iid:0,
      addRules:{
        iname:[
          {required: true, message: '项目名称不能为空', trigger: 'blur'},
          {min: 3, max: 12, message: '项目名称长度在 3 到 12 个字', trigger: 'blur'}
        ],
        iintro:[
          {required: true, message: '项目简介不能为空', trigger: 'blur'}
        ],
        amoney:[
          {validator: checkAmoney, trigger: 'blur'},
          {min: 3, max: 8, message: '不能低于100元,不能高于10,000,000元', trigger: 'blur'}
        ],
        idays:[
          {validator: checkAmoney, trigger: 'blur'},
          {min: 2, max: 2, message: '筹资天数为10-99天', trigger: 'blur'}
        ],
        mshow:[
          {required: true, message: '自我介绍不能为空', trigger: 'blur'},
          {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
        ],
        mtel:[
          {validator: checkMobile, trigger: 'blur'}
        ],
        msertel:[
          {validator: checkMobile, trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    async selectAllCategory(){
      let res = await this.$http.get("/selectAllCategory");
      if (res.data.code == 200){
        this.category = res.data.data;
      }
    },
    //上传图片成功时执行的方法
    IImgSuccess(resp){
      if (resp.code == 200){
        this.addIImgList = resp.message;
      }
    },
    showImgSuccess(resp){
      this.addIShowImgList = resp.message;
    },
    //下一步 临时保存已收集的数据
    nextItem(){
      this.$refs.addItemRef.validate(async (val) => {
        if (val) {
          let param = new URLSearchParams();
          param.append("cid",this.addItem.cid);
          param.append("iname",this.addItem.iname);
          param.append("iintro",this.addItem.iintro);
          param.append("amoney",this.addItem.amoney);
          param.append("idays",this.addItem.idays);
          param.append("iimg",this.addIImgList);
          param.append("ishowimg",this.addIShowImgList);
          param.append("mshow",this.addItem.mshow);
          param.append("mtel",this.addItem.mtel);
          param.append("msertel",this.addItem.msertel);
		  let id = window.sessionStorage.getItem("userid");
		  param.append("userid",id);
          let res = await this.$http.post("addMessToItem",param);
          if (res.data.code==200){
            //赋值
            this.iid = res.data.data.iid;
            //动态设置第二步
            this.$emit("forNum",2)
            //跳转
            await this.$router.push("/s_s_2/"+this.iid);
            alert("请进行下一步操作")
          }
        }else {
          alert("格式错误 请修正")
        }
      })
    }
  },
  /* beforeDestroy () {

    //兄弟组件传值 把iid传入下一步
    hub.$emit('iid',this.iid)
  }, */
  mounted() {
    this.selectAllCategory();
    this.$emit("forNum",1)
  }/* ,
  created() {
    //从兄弟组件中获取值
    let that = this;
    hub.$on('iid',(val) => {
      that.iid = val
    })
  } */
}
</script>

<style scoped>

  #main-form{
    width: 70%;
    margin: 30px auto;
    border: lightskyblue 1px solid;

  }
  b{
    display: inline;
    width: 100px;
    line-height: 30px;
    float: left;
  }
  #main-sub{
    line-height: 60px;
    margin: 0 auto;
    text-align: center;
  }


</style>